<template>
  <div>{{}}</div>
</template>

<script>
import { watch, reactive } from "@vue/composition-api";

export default {
  setup() {
    const state = reactive({ count: 0, name: "ahhh" });

    /** 1) 监视单个*/
    /*watch(
      () => state.count, //←必须是一个()=>
      (cur, prev) => {
        console.log(cur,prev)
        /!*
          0 undefined ← 默认组件创建时会打印 除非你手动将lazy置为true
          1 0
        *!/
      },
      {
        // lazy: true
      }
    );

    setTimeout(()=>{
      state.count += 1;
    },2000)*/

    /** 2) 监视多个*/
    watch(
      [() => state.count, () => state.name],
      ([count, name], [prevCount, prevName]) => {
        console.log("new count:", count);
        console.log("new name", name);

        console.log("old count:", prevCount);
        console.log("old name", prevName);
      },
      {
        lazy: true /** ←此时lazy必须为true 否则报错:↓
         [Vue warn]: Error in callback for immediate watcher "function () { return source.map(function (s) { return (isRef(s) ? s.value : s()); }); }": "TypeError: Invalid attempt to destructure non-iterable instance.
         In order to be iterable, non-array objects must have a [Symbol.iterator]() method."*/
      }
    );

    setTimeout(() => {
      state.count += 1;
    }, 2000);
  }
};
</script>

<style scoped></style>
